<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;}
            #menudiv2:hover{background-color: #FF6600;color: #1A3665}
        </style>  
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            } 
            @media screen and (-webkit-min-device-pixel-ratio:0)
            {
                #number{margin-top: 2px}
                #fix1 { margin-top: 0px }
                #logo,#address,#email,#level{margin-top: 25px}
                #phone, #des{margin-top: 25px}
                #contact {margin-top: 252px}
                #check{margin-top: 10px}
                #toj {margin-top: 25px}
                #exp {margin-top: 254px}
            }
            @-moz-document url-prefix()
            {
                #fix1 { margin-top: -20px }
            #logo,#address,#email, #level{margin-top:21px}
            #phone, #des{margin-top: 21px}
            #contact {margin-top: 250px}
            #number {margin-top: 0px}
            #check{margin-top: 25px}
            #toj {margin-top: 22px}
            #exp {margin-top: 266px}
            }
        </style>         
    </h:head>
    <h:body style="background-color:  #1A3665">
        <f:view locale="#{languageBean.locale}">

            <div style="width: 1000px;margin: auto;margin-top: 20px;background-color: white;border-radius: 10px;-moz-border-radius: 10px">
                <ui:include src="headertemplate1.xhtml" />
                <h:form id="formId" style="font-size: 85% !important">
                    <div>
                        <ul style="margin-top: 50px;margin-left: 80px">                    
                            <li style="display: inline-block;width: 670px;vertical-align: top;margin-left: 40px;border: 1px;border-style: double dashed;border-top-right-radius: 10px;-moz-border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;border-top-left-radius: 10px">
                                <ul style="margin-top: 20px;text-align: center">
                                    <li style="display: inline;font-size: 20px;font-weight: bold;color: #FF6600">
                                        Title :
                                    </li>
                                    <li style="display: inline">
                                        <h:inputText value="#{customerEditProfile.rec.title}" style="width: 300px" id="recTitle" required="true" requiredMessage="* Title is required"/>
                                    </li>
                                </ul>
                                <ul>
                                    <li style="list-style: none;margin-left: 200px;margin-top: 10px"><h:message for="recTitle" style="color: red" /></li>
                                </ul>
                                <div style="font-size: 20px;font-weight: bold;border: 1px;border-bottom-style:  dotted;padding : 20px 0px 5px 20px">
                                    <font style="color: #FF6600">Your Information </font>
                                </div>
                                <ul style="margin-top: 30px;margin-left: -50px">
                                    <li style="display: inline-block;vertical-align: top;text-align: right;width: 260px;font-weight: bold;">
                                        <ul>
                                            <li style="list-style: none;margin-top: 2px">Business name :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;" id="logo">Logo :  </li>
                                            <li style="list-style: none;" id="address">Address :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;" id="phone">Phone :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;" id="des">Description of your business :<font style="color: red"> *</font></li>
                                            <li style="list-style: none"><h:message for="cusDes" style="color: red;font-weight: normal"/></li>
                                            <li style="list-style: none;" id="contact">Contact Person :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;" id="email">Email :<font style="color: red"> *</font></li>
                                        </ul>
                                    </li>                        
                                    <li style="display: inline-block;vertical-align: top;margin-left: -15px;">    
                                        <ul>
                                            <li style="display: inline"><h:inputText value="#{customerEditProfile.cus.name}" id="cusName" required="true" requiredMessage="* Business name is required"/></li>
                                            <li style="display: inline"><h:message for="cusName" style="color: red"/> </li>
                                        </ul>
                                        <ul>
                                            <li style="list-style: none;margin-top: 15px"><p:fileUpload value="#{customerEditProfile.file}" mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /></li>  
                                        </ul>
                                        <ul style="margin-top: 15px">
                                            <li style="display: inline"><h:inputText value="#{customerEditProfile.cus.address}" id="cusAdd" required="true" requiredMessage="* Address is required"/></li>
                                            <li style="display: inline"><h:message for="cusAdd" style="color: red"/> </li>
                                        </ul>
                                        <ul style="margin-top: 15px">
                                            <li style="display: inline;">
                                                <h:inputText value="#{customerEditProfile.cus.phone}" id="cusPhone" required="true" requiredMessage="* Phone is required" validatorMessage="* Phone is not valid">
                                                    <f:validateRegex pattern="^09[0-9]{8}||^01[0-9]{9}"  />
                                                </h:inputText>
                                            </li>
                                            <li style="display: inline"><h:message for="cusPhone" style="color: red"/></li>
                                        </ul>
                                        <ul style="margin-top: 15px">
                                            <li style="list-style: none"><p:editor value="#{customerEditProfile.cus.description}" width="300" id="cusDes" required="true" requiredMessage="* Description is required"/></li>
                                        </ul>
                                        <ul style="margin-top: 15px">
                                            <li style="display: inline;"><h:inputText value="#{customerEditProfile.rec.contactPerson}" id="recContact" required="true" requiredMessage="* Contact Person is required"/></li>
                                            <li style="display: inline"><h:message for="recContact" style="color: red"/></li>
                                        </ul>
                                        <ul style="margin-top: 15px">
                                            <li style="display: inline;">
                                                <h:inputText value="#{customerEditProfile.rec.email}" id="recEmail" required="true" requiredMessage="* Email is required" validatorMessage="* Email is not valid">
                                                    <f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)"  />
                                                </h:inputText>
                                            </li>
                                            <li style="display: inline"><h:message for="recEmail" style="color: red"/></li>
                                        </ul>
                                    </li>
                                </ul> 
                                <div style="font-size: 20px;font-weight: bold;border: 1px;border-bottom-style:  dotted;padding : 0px 0px 5px 20px;margin-top: 40px">
                                    <font style="color: #FF6600">Recruitment Requirements</font>
                                </div>
                                <div>
                                    <ul>
                                        <li style="list-style: none;font-weight: bold;margin-top: 30px;margin-left: 10px">
                                            Job Category :<font style="color: red">*</font> <font style="color: blue;font-weight: normal">( maximum is 3 )</font> <h:message for="select1" style="color: red;font-weight: normal;margin-left: 10px"/>
                                        </li>                                
                                    </ul>
                                    <ul style="margin-top: 10px">
                                        <li style="display: inline-block">
                                            <div style="margin-left: 15px;font-size: 88%">
                                                <h:selectManyListbox value="#{customerEditProfile.cate_temp}" id="select1" style="width: 250px;height: 105px;">
                                                    <f:selectItems value="#{customerEditProfile.cate}" var="c" itemValue="#{c.categoryName}" itemLabel="#{c.categoryName}" />

                                                </h:selectManyListbox>
                                            </div>
                                        </li>
                                        <li style="display: inline-block;margin-left: 20px;vertical-align: top;margin-top: 40px">
                                            <h:commandButton value="" style="background: url('images/iconArrow.gif') no-repeat;border-style: none;height: 19px;width:18px;cursor: pointer" action="#{customerEditProfile.insertCate()}">
                                                <f:ajax event="action" execute="select1" render="output1" />
                                            </h:commandButton>
                                        </li>
                                        <li style="display: inline-block;vertical-align: top">
                                            <div style="margin-left: 15px;font-size: 88%;width: 250px;height: 105px;border: 2px;border-style: solid;border-color: #E9E9E9">
                                                <table style="width: 100%" id="mySelect1">
                                                    <tr style="color: #FF6600;background-image: url('images/treeTabBg.gif')">
                                                        <th style="text-align: left;width: 75%">Categories</th>
                                                        <th style="text-align: center">Remove</th>
                                                    </tr>
                                                    <tr>
                                                        <h:panelGrid id ="wrapper1">
                                                            <h:dataTable value="#{customerEditProfile.subCate}" style="width: 260px;" var="p" id="output1" >
                                                                <h:column>
                                                                    <td style="text-align: left;width: 75%">
                                                                        <h:outputText value="#{p}"/>
                                                                    </td>
                                                                    <td>
                                                                        <h:commandButton value="[X]" style="border: none;cursor: pointer;background-color: white;font-weight: bold;font-size: 80%;text-align: right" action="#{customerEditProfile.deleteCate(p)}" >
                                                                            <f:ajax event="action" render=":formId:wrapper1" />
                                                                        </h:commandButton>                                                                
                                                                    </td>
                                                                </h:column>
                                                            </h:dataTable>
                                                        </h:panelGrid>
                                                    </tr>
                                                </table>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <ul>
                                        <li style="list-style: none;font-weight: bold;margin-top: 30px;margin-left: 10px">
                                            Work Location :<font style="color: red">*</font> <font style="color: blue;font-weight: normal">( maximum is 3 )</font> <h:message for="select2" style="color: red;font-weight: normal;margin-left: 10px"/>
                                        </li>                                
                                    </ul>
                                    <ul style="margin-top: 10px">
                                        <li style="display: inline-block">
                                            <div style="margin-left: 15px;font-size: 88%">
                                                <h:selectManyListbox value="#{customerEditProfile.loc_temp}" id="select2" style="width: 250px;height: 105px;">
                                                    <f:selectItems value="#{customerEditProfile.loc}" var="l" itemValue="#{l.name}" itemLabel="#{l.name}" />
                                                </h:selectManyListbox>
                                            </div>
                                        </li>
                                        <li style="display: inline-block;margin-left: 20px;vertical-align: top;margin-top: 40px">
                                            <h:commandButton value="" style="background: url('images/iconArrow.gif') no-repeat;border-style: none;height: 19px;width:18px;cursor: pointer" action="#{customerEditProfile.insertLoc()}">
                                                <f:ajax event="action" execute="select2" render="output2" />
                                            </h:commandButton>
                                        </li>
                                        <li style="display: inline-block;vertical-align: top">
                                            <div style="margin-left: 15px;font-size: 88%;width: 250px;height: 105px;border: 2px;border-style: solid;border-color: #E9E9E9;">
                                                <table style="width: 100%" id="mySelect2">
                                                    <tr style="color: #FF6600;background-image: url('images/treeTabBg.gif');">
                                                        <th style="text-align: left;width: 75%">Categories</th>
                                                        <th style="text-align: center">Remove</th>
                                                    </tr>
                                                    <tr>
                                                        <h:panelGrid id ="wrapper2">
                                                            <h:dataTable value="#{customerEditProfile.subLoc}" style="width: 260px;" var="p" id="output2" >
                                                                <h:column>
                                                                    <td style="text-align: left;width: 75%">
                                                                        <h:outputText value="#{p}"/>
                                                                    </td>
                                                                    <td>
                                                                        <h:commandButton value="[X]" style="border: none;cursor: pointer;background-color: white;font-weight: bold;font-size: 80%;text-align: right" action="#{customerEditProfile.deleteLoc(p)}" >
                                                                            <f:ajax event="action" render=":formId:wrapper2" />
                                                                        </h:commandButton>                                                                
                                                                    </td>
                                                                </h:column>
                                                            </h:dataTable>
                                                        </h:panelGrid>
                                                    </tr>
                                                </table>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <ul style="margin-top: 30px">
                                    <li style="display: inline-block;vertical-align: top;text-align: right;width: 220px;font-weight: bold;">
                                        <ul>
                                            <li style="list-style: none;" id="number">Number of recruitment :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;" id="level">Job Level :</li>
                                            <li style="list-style: none;" id="toj">Type of Job :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;margin-top: 40px">Job Description :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;margin-top: 5px"><h:message for="recDes" style="color: red;font-weight: normal"/></li>
                                            <li style="list-style: none;margin-top: 250px">Benefits: :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;margin-top: 5px"><h:message for="recBen" style="color: red;font-weight: normal"/></li>
                                            <li style="list-style: none;margin-top: 250px">Job Requirement :<font style="color: red"> *</font></li>
                                            <li style="list-style: none;margin-top: 5px"><h:message for="recReq" style="color: red;font-weight: normal"/></li> 
                                        </ul>
                                    </li>                        
                                    <li style="display: inline-block;vertical-align: top;margin-left: -15px; ">    
                                        <ul>
                                            <li style="display: inline"><h:inputText value="#{customerEditProfile.number_temp}" id="numTemp" required="true" requiredMessage="* Number of recruitment is required"/></li>
                                            <li style="display: inline"><h:message for="numTemp" style="color: red"/> </li>
                                        </ul>
                                        <ul>
                                            <li style="list-style: none;margin-top: 15px">
                                                <h:selectOneMenu value="#{customerEditProfile.lv_temp}" >
                                                    <f:selectItems value="#{customerEditProfile.listLJ}" var="l" itemLabel="#{l.name}" itemValue="#{l.id}"/>

                                                </h:selectOneMenu>
                                            </li>    
                                            <li style="list-style: none;margin-top: 15px">
                                                <h:selectOneRadio value="#{customerEditProfile.joj_temp}" layout="pageDirection">
                                                    <f:selectItem itemLabel="Full-Time" itemValue="1"/>
                                                    <f:selectItem itemLabel="Part-time / Temporary" itemValue="0" />
                                                </h:selectOneRadio>
                                            </li>
                                            <li style="list-style: none;margin-top: 15px"><p:editor value="#{customerEditProfile.rec.jobDescription}" width="300" id="recDes" required="true" requiredMessage="* Job Description is required"/></li>
                                            <li style="list-style: none;margin-top: 15px"><p:editor value="#{customerEditProfile.rec.benefits}" width="300" id="recBen" required="true" requiredMessage="* Benefits is required"/></li>
                                            <li style="list-style: none;margin-top: 15px"><p:editor value="#{customerEditProfile.rec.jobRequiment}" width="300" id="recReq" required="true" requiredMessage="* Job Requirement is required"/></li>
                                        </ul>
                                    </li>
                                </ul>
                                <ul id="check" style="margin-left: 75px">
                                    <li style="display: inline-block;font-weight: bold;text-align: right;width: 130px" >
                                        Expired Date :<font style="color: red"> *</font>
                                    </li>
                                    <li style="display: inline-block">
                                        <ul>
                                            <li style="display: inline"><p:calendar value="#{customerCreateProfile.date_temp}" id="expDate" pattern="dd.MM.yyyy" required="true" requiredMessage="* Expired Date is required" /></li>
                                            <li style="display: inline">
                                                <h:message for="expDate" style="color: red"/>
                                            </li>
                                        </ul>                                        
                                    </li>
                                </ul>                                
                                <ul style="margin-top: 20px;margin-left: 50px;border:1px;border-top-style: dotted;width: 520px">
                                    <div style="margin-top: 20px">
                                        <li style="display: inline;font-size: 16px;background-color: #1A3665;padding: 5px 10px 5px 10px"><h:commandButton  value="Back" action="#{customerEditProfile.backToProfile()}" style="border: none;font-weight: bold;background-color: #1A3665;color: white;cursor: pointer" immediate="true"/></li>
                                        <li style="display: inline;font-size: 16px;background-color: #1A3665;padding: 5px 10px 5px 10px;margin-left: 330px"><h:commandButton value="Done" style="border: none;color: white;background-color: #1A3665;cursor: pointer;font-weight: bold" actionListener="#{customerEditProfile.upload}" action="#{customerEditProfile.customerEditProfile()}"/></li>
                                    </div>
                                </ul>
                                <br/>
                                <br/>
                            </li>
                        </ul>
                        <br/>
                        <br/>
                    </div>
                </h:form>
            </div>
            <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
                <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                    Copyright © by Group 1
                    <br />
                    Project Name : Work to Worker
                    <br />
                    Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
                </div>
            </div>

        </f:view>
    </h:body>
</html>

